<template>
  <div>
    
    <van-row>
      <van-col span="6">
        <!-- <van-tabs v-model="active" @click="change">
      <van-tab
        v-for="item in list"
        :key="item.miniWallkey"
        :title="item.title"
        :name="item.miniWallkey"
      ></van-tab>
    </van-tabs> -->
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in list"
            :key="item.miniWallkey"
            :title="item.title"
            @click="change(item.miniWallkey)"
          />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-card
          v-for="(item, index) in cate"
          :price="item.price"
          :title="item.title"
          :thumb="item.img"
          :key="index"
          @click="gotodetail(item)"
        >
          <template #footer>
            <van-icon
              name="shopping-cart-o"
              size="30"
              @click.stop="add(item)"
            />
          </template>
        </van-card>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      list: [],
      cate: [],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$http("/category", "get").then((res) => {
        console.log(res);
        this.list = res.data.data.category.list;
        this.change("10062603")
      });
    },
    change(miniWallkey) {
      this.$http(
        "/subcategory/detail",
        "get",
        {},
        { miniWallkey:miniWallkey, type: "pop" }
      ).then((res) => {
        console.log(res);
        console.log(this.activeKey);
        this.cate = res.data;
      });
    },
  
    gotodetail(item) {
      this.$router.push({ path: "/detail", query: { item } });
    },
    add(item) {
      this.$store.commit("add", item);
    },
  },
};
</script>

<style lang="scss"></style>
